<template>
  <NModal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 400px">
      <MacHeader
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <n-tabs type="line" animated>
          <n-tab-pane name="base" tab="基础信息">Wonderwall</n-tab-pane>
          <n-tab-pane name="netdisk" tab="网盘信息">Wonderwall</n-tab-pane>
        </n-tabs>
        <NScrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <NForm ref="ruleForm" :model="queryForm" :rules="rules">
              <NFormItem label="标题" path="name">
                <NInput v-model:value="queryForm.name" placeholder="请输入" />
              </NFormItem>
              <NFormItem label="分类" path="type_id">
                <n-select
                  v-model:value="queryForm.type_id"
                  :options="stateOptions.classify"
                  placeholder="请选择"
                  label-field="name"
                  value-field="id"
                />
              </NFormItem>
              <NFormItem label="人员" path="author_id">
                <y-select-usr
                  v-model="queryForm.author_id"
                  @change="userChange"
                />
              </NFormItem>
              <NFormItem label="国家" path="country">
                <n-select
                  v-model:value="queryForm.country"
                  :options="countryEnum"
                  placeholder="请选择"
                  label-field="label"
                  value-field="value"
                />
              </NFormItem>
              <NFormItem label="标签">
                <n-space>
                  <n-tag
                    closable
                    v-for="item in queryForm.tags"
                    :key="item.id"
                    @close="handleClose(item)"
                  >
                    {{ item }}
                  </n-tag>
                  <n-tag class="cursor-pointer" @click="handAddTag">
                    添加标签
                  </n-tag>
                </n-space>
              </NFormItem>
              <NFormItem label="是否私密" path="private">
                <n-switch
                  :checked-value="1"
                  :unchecked-value="0"
                  v-model:value="queryForm.private"
                />
              </NFormItem>
              <NFormItem label="价格" path="price">
                <NInputNumber
                  class="w-full"
                  v-model:value="queryForm.price"
                  placeholder="请输入"
                />
              </NFormItem>
              <NFormItem label="权重" path="sort">
                <NInputNumber
                  class="w-full"
                  v-model:value="queryForm.sort"
                  placeholder="请输入"
                />
              </NFormItem>
              <NFormItem>
                <div class="tools w-full">
                  <NButton
                    type="primary"
                    attr-type="button"
                    @click="handleValidateClick"
                  >
                    <span>提交</span>
                  </NButton>
                </div>
              </NFormItem>
            </NForm>
          </div>
        </NScrollbar>
      </div>
    </div>
  </NModal>
  <choose-tag ref="tagRef" @change="tagChange" />
</template>
<script setup lang="ts">
import { ref, inject } from 'vue'
import { useFullscreen } from '@vueuse/core'
import photoListApi from '@/service/api/photo/list'
import type { FormInst, FormRules } from 'naive-ui'
import {
  NButton,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSwitch,
  NScrollbar,
  NInputNumber,
  NSpace,
  NTag,
  NTabs,
  NTabPane
} from 'naive-ui'
import YSelectUsr from '@/components/yang/yselectuser/index.vue'
import MacHeader from '@/components/codeBlock/MacHeader'
import ChooseTag from '@/views/photo/list/components/ChooseTag.vue'
import { diaApi } from '@/hooks/addDialog'
import countryEnum from '@/enum/countryEnum'
import type { photoListState } from '@/types/options'
const stateOptions = inject('stateOptions') as photoListState
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const emit = defineEmits(['success'])
const ruleForm = ref<FormInst | null>(null)
const state = {
  ruleForm,
  apis: {
    doAdd: {
      api: photoListApi.add
    },
    doEdit: {
      api: photoListApi.edit
    }
  },
  emit,
  queryForm: {
    type_id: '',
    name: '',
    private: 0,
    author_id: '',
    country: '',
    price: '',
    tags: [],
    sort: 1
  }
}
const {
  dialogFormVisible,
  title,
  queryForm,
  open,
  close,
  handleValidateClick
} = diaApi(state)

const rules: FormRules = {
  type_id: [
    {
      type: 'number',
      required: true,
      message: '分类不能为空',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '标题不能为为空',
      trigger: 'blur'
    }
  ],
  author_id: [
    {
      type: 'number',
      required: true,
      message: '人员不能为为空',
      trigger: 'blur'
    }
  ],
  country: [
    {
      required: true,
      message: '国家不能为为空',
      trigger: 'blur'
    }
  ],
  private: [
    {
      type: 'number',
      required: true,
      message: '请选择是否私密',
      trigger: 'blur'
    }
  ],
  price: [
    {
      type: 'number',
      required: true,
      message: '请输入价格',
      trigger: 'blur'
    }
  ],
  sort: [
    {
      type: 'number',
      required: true,
      message: '请输入权重',
      trigger: 'blur'
    }
  ]
}
defineExpose({
  open
})

// 标签
const handleClose = (e: number) => {
  queryForm.value.tags = queryForm.value.tags.filter(
    (item: string) => item !== e
  )
}
const tagRef = ref()
const handAddTag = () => {
  tagRef.value.open()
}
const tagChange = (arr: any) => {
  queryForm.value.tags = arr
}
const userChange = (e: any) => {
  queryForm.value.country = e.country
}
</script>

<style scoped lang="scss"></style>
